<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
  <div class="box">
    <div class="msg">
      <span>我的身高:</span>
      <input type="text" id="h" v-model="h">单位: 厘米 cm
    </div>
    <div class="msg">
      <span>我的体重:</span>
      <input type="text" id="w" v-model="w">单位: 千克 kg
    </div>

    <input @click="calculate" type="submit"  class="msg1"  value="计算 BMI" title="计算 BMI">


  </div>

  <table>
    <tr>
      <th>#</th>
      <th>身高</th>
      <th>体重</th>
      <th>BMI</th>
      <th>操作</th>
    </tr>
    </tr>
    <tr v-if="list.length === 0">
      <td colspan="5">暂无数据</td>
    </tr>
    <tr v-else v-for="(item, index) of list">
      <td>{{index + 1}}</td>
      <td>{{ item.height }}</td>
      <td>{{ item.weight }}</td>
      <td>{{ item.bmi }}</td>
      <td>
        <a @click="delItem(item.objectId)" href="javascript:void(0)">删除</a>
      </td>
    </tr>
  </table>
</div>

<script src="vue.js"></script>
<script>

  const app = new Vue({
    data: {
      list: [],
      h:'',
      w:'',

    },
    created() {
      /*fetch('https://veihwwnelcwq.leanapp.cn/bmi')
        .then(res => res.json())
        .then(res => {
          this.list = res.data
        })*/
      this.getList()
    },
    methods: {
      getList() {
        fetch('https://veihwwnelcwq.leanapp.cn/bmi')
          .then(res => res.json())
          .then(res => {
            this.list = res.data
          })
      },
      calculate(h,w) {

        fetch('https://veihwwnelcwq.leanapp.cn/bmi',{
          method:'POST',
          headers: {
            'content-type': 'application/json'
          },
          body: JSON.stringify({
            height:this.h,
            weight:this.w
          })
        })
        .then(res => res.json())
        .then(res => {
              console.log(res)
          location.reload()
        })
      },


      delItem(id) {

        fetch('https://veihwwnelcwq.leanapp.cn/bmi', {
          method: 'DELETE',
          headers: {
            'content-type': 'application/json'
          },
          body: JSON.stringify({
            id: id
          })
        })
          .then(res => res.json())
          .then(res => {
            this.getList()
          })
      }
    }
  }).$mount('#app')
</script>
</body>
</html>